import React, { Component } from 'react'

export class Header extends Component {
    render() {
        //  解构父亲传来的参数 ---父组件传来的函数，子组件调用，并且正常传参
        const { tabList, active, change } = this.props;
        return (
            <div className='header'>
                {
                    tabList.length ? //边界值判断
                        tabList.map((item, index) => {
                            return <button 
                            key={item.id}
                            className={active === index? "on":""}
                            onClick={() => {
                                change(index); //子组件不能修改父组件的数据
                            }}
                            >
                                {item.title}
                            </button>
                        }) : "暂无数据"
                }
            </div>
        )
    }
}

export default Header